<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <header class="main-header">
            <h1>🌳 虫虫子树洞</h1>
            <p>倾诉心声，留下足迹</p>
            {{if .is_logged_in}}
            <div class="user-info">
                <span>欢迎，{{.current_nickname}}</span>
                <a href="/logout" class="logout-btn">退出</a>
            </div>
            {{else}}
            <div class="auth-buttons">
                <a href="/login" class="auth-btn">登录</a>
                <a href="/register" class="auth-btn">注册</a>
            </div>
            {{end}}
            {{if .is_logged_in}}
            <button class="post-btn" onclick="showPostPanel()">发表</button>
            {{end}}
        </header>

        {{if .is_logged_in}}
        <!-- 发表面板（默认隐藏） -->
        <div class="post-section" id="postPanel" style="display: none;">
            <h2>发布说说</h2>
            <form id="postForm">
                <textarea id="contentInput" placeholder="说出你的心声..." rows="5"></textarea>
                <div class="emoji-panel" id="emojiPanel" style="display: none;">
                    <span class="emoji" onclick="insertEmoji('😊')">😊</span>
                    <span class="emoji" onclick="insertEmoji('😂')">😂</span>
                    <span class="emoji" onclick="insertEmoji('😍')">😍</span>
                    <span class="emoji" onclick="insertEmoji('🤔')">🤔</span>
                    <span class="emoji" onclick="insertEmoji('😢')">😢</span>
                    <span class="emoji" onclick="insertEmoji('😮')">😮</span>
                    <span class="emoji" onclick="insertEmoji('👍')">👍</span>
                    <span class="emoji" onclick="insertEmoji('❤️')">❤️</span>
                    <span class="emoji" onclick="insertEmoji('🎉')">🎉</span>
                    <span class="emoji" onclick="insertEmoji('🔥')">🔥</span>
                </div>
                <div class="button-group">
                    <button type="button" class="emoji-btn" onclick="toggleEmoji()">😊</button>
                    <button type="submit" class="submit-btn">发布</button>
                    <button type="button" class="cancel-btn" onclick="hidePostPanel()">取消</button>
                </div>
            </form>
        </div>
        {{else}}
        <div class="login-prompt">
            <p>请先<a href="/login">登录</a>或<a href="/register">注册</a>后发表说说和评论</p>
        </div>
        {{end}}

        <div class="shuoshuos-section">
            <h2>最新动态</h2>
            <div id="shuoshuosContainer">
                {{if .shuoshuos}}
                    {{range .shuoshuos}}
                    <div class="shuoshuo-item" data-id="{{.ID}}" data-user-id="{{.UserID}}">
                        <div class="shuoshuo-header">
                            <span class="author">@{{.Nickname}}</span>
                            <span class="shuoshuo-time" data-time="{{.CreatedAt.Unix}}"></span>
                            {{if and $.is_logged_in (eq $.current_user_id .UserID)}}
                            <button class="delete-btn" onclick="deleteShuoshuo({{.ID}})">删除</button>
                            {{end}}
                        </div>
                        <div class="shuoshuo-content">{{.Content}}</div>
                        {{if $.is_logged_in}}
                        <div class="comment-section">
                            <button class="toggle-comment-btn" onclick="toggleComment({{.ID}})">
                                <span class="comment-icon">💬</span> 评论
                            </button>
                            <div class="comment-input-area" id="comment-input-{{.ID}}" style="display: none;">
                                <textarea class="comment-input" rows="2" placeholder="写评论..."></textarea>
                                <div class="comment-actions">
                                    <button class="comment-btn" onclick="postComment({{.ID}})">发布</button>
                                    <button class="cancel-comment-btn" onclick="cancelComment({{.ID}})">取消</button>
                                </div>
                            </div>
                            <div class="comments-container" id="comments-{{.ID}}">
                                <!-- 评论动态加载 -->
                            </div>
                        </div>
                        {{else}}
                        <div class="comment-prompt">
                            <a href="/login">登录</a>后可以评论
                        </div>
                        {{end}}
                    </div>
                    {{end}}
                {{else}}
                    <div class="empty-message">暂无内容</div>
                {{end}}
            </div>

            {{if and .total_pages (gt .total_pages 1)}}
            <div class="pagination">
                {{if gt .page 1}}
                    <a href="?page={{.prev_page}}" class="page-btn">上一页</a>
                {{end}}
                
                <span class="page-info">第 {{.page}} / {{.total_pages}} 页（共 {{.total}} 条）</span>
                
                {{if lt .page .total_pages}}
                    <a href="?page={{.next_page}}" class="page-btn">下一页</a>
                {{end}}
            </div>
            {{end}}
        </div>
    </div>

    <script src="/static/js/main.js"></script>
    <script>
        const IS_LOGGED_IN = {{.is_logged_in}};
        const CURRENT_USER_ID = {{.current_user_id}};
    </script>
</body>
</html>
